<%@page import="riteservices.model.bean.User"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="riteservices.model.bean.Round"%>
<%@page import="java.util.List"%>
<head><script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script></head>
<script type="text/javascript">
    $(function(){
        $( "#mapa" ).dialog({
                    modal: true,
                    width: 600,
                    autoOpen: false
                });
                
                $("#verMapa").click(function(){
                    $( "#mapa" ).dialog("open");
                }); 
    })
    var rendererOptions = {
        draggable: true
    };
    var merida = new google.maps.LatLng(20.978, -89.620);
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
    var directionsService = new google.maps.DirectionsService();
    var map;
  
 function drawRoute(origin, destiny)
 {
     var request = {
        origin: origin,
        destination: destiny,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        }
  });
    
 }
 $(document).ready(function(){
    var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: merida  
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    drawRoute($("#origin").val(),$("#destiny").val());
});
  
</script>
<%
List<Round> rounds = (List<Round>) request.getSession().getAttribute("rounds");
User user = (User) request.getSession().getAttribute("user");
if(rounds!=null){
    for(Round round : rounds){ %>
        <div class="well" id="mapDetails" title="Detalles de la Ronda">
            <h1>Detalles de la ronda</h1>
            <input type="text" name="origin" id="origin" value="<% out.println(round.getRoute().getOrigin());%>" style="display: none;">
            <input type="text" name="destiny" id="destiny" value="<% out.println(round.getRoute().getDestiny());%>" style="display: none;">
                    <table>
                         <tr>
                             <td>Horario</td>
                             <td><% out.println(round.getSchedule()); %></td>
                         </tr>
                         <tr>
                             <td>Dias</td>
                             <td><% out.println(round.getDays()); %></td>
                         </tr>
                         <tr>
                             <td>Cuota</td>
                             <td><% out.println(round.getQuota()); %></td>
                         </tr>
                         <tr>
                             <td>Ocupado/Capacidad</td>
                             <td><% out.println(round.getUsers().size()+"/"+round.getCapacity()); %></td>
                         </tr>
                         <tr>
                             <td><a href="#" id="verMapa">Ver Mapa</a></td>
                             <td><% boolean band = true;
                             for(User userList: round.getUsers()){
                                    if(userList.getIdUser().compareTo(user.getIdUser())==0){
                                        band = false;
                                    }                                    
                             } if(band){ %>
                                    <a href="RegisterRequest?roundid=<% out.println(round.getIdRound()); %>" style="float:right;" id="joinToRoundButton" class="btn btn-success dropdown-toggle" data-toggle="dropdown" ><h3>Deseo unirme a la Ronda</h3></span></a> 
                                <%} else{ %>
                                        <h3 style="float: right;">Ya eres pasajero de esta ronda</h3>
                            <% } %></td>
                         </tr>
                         <tr><td><div id="mapa"><div style="height: 380px;width:100%;" id="map_canvas">
                             </div></div></td></tr>
                     </table>
                         <br />
                         

        </div>
    <% }
}else{ %>
<h1>No hay rondas coindentes</h1> 
<% }
%>
